    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>localStorage与sessionStorage案例--记住密码登录账号</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 100%;
                margin: 100px auto;
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <label for="">
            账户：<input type="text" class="userName">
        </label>
        <br><br>
        <label for="">
            密码：<input type="pwd" class="pwd">
        </label>
        <br><br>
        <input type="checkbox" class="chk">记住密码账号
        <br><br>
        <button>login</button>
    </div>
        <script>
          var btn1=document.querySelector('button');
            var userNme=document.querySelector('.userName');
            var pwd=document.querySelector('.pwd');
            var chk=document.querySelector('.chk');


            btn1.onclick=function () {
                if(chk.checked){
                    window.localStorage.setItem('userName',userNme.value);
                    window.localStorage.setItem('pwd',pwd.value);
                }else{
                    window.localStorage.removeItem('userName');
                    window.localStorage.removeItem('pwd');
                }
            }
            window.onload=function () {
                userNme.value= window.localStorage.getItem('userName');
                pwd.value=window.localStorage.getItem('pwd')
            }
        </script>
    </body>
    </html>